<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/commonhead.css">
    <link rel="stylesheet" href="../CSS/yuealbum.css">
    <link rel="stylesheet" href="../mouse.css">
</head>

<body>
    <script src="../JS/commonhead.js"></script>
    <div class="cursor"></div>
    <div class="guoalbum_all w">
        <div class="guoalbum_title">
            <a href="../HTML/albumall.html"></a>
        </div>
        <div class="album_content">
            <div class="album_contenttop">
                <img src="../images/yue-album/yue album/0-1.png" alt="">
                <img src="../images/yue-album/yue album/0-2.png" alt="">
                <a href="javascript:;"><img src="../images/all-album/yueyu zhuanqu.png" alt=""></a>
            </div>
            <div class="album_conbottom">
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/1-1.png" alt=""> <i
                            class="information">L.O.V.E. </i><em class="date">2018-12-12</em><audio
                            src="https://webfs.ali.kugou.com/202205060824/c1e0a27cabf157c5fb5820a9ea74148c/part/0/960173/KGTX/CLTX001/2bb2f4a7c5bb0aeb730ab5181ca516f1.mp3"></audio></span>
                    <div class="line1word">
                        <span class="front"><img src="../images/yue-album/yue album/1-2.png" alt=""></span>
                        <span class="back"><img src="../images/all-album/geci effect/6-2d.png" alt=""></span>
                    </div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/1-3.png" alt=""> <i
                            class="information">H3M</i><em class="date">2009-03-23 </em><audio
                            src="https://webfs.ali.kugou.com/202205060824/6ad39dca45edaed14ae49f6ae5f4ffe2/KGTX/CLTX001/4b112b5e3d29acfa34da5b63b050f109.mp3"></audio></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/1-4.png" alt=""> <i
                            class="information">Taste the Atmosphere </i><em class="date">2010-12-22</em><audio
                            src="https://webfs.ali.kugou.com/202205060822/80caa360ba9032504d8be7e75eb190eb/KGTX/CLTX001/4a20120b9723854ad4cbb5175e9783e7.mp3"></audio></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/2-1.png" alt=""> <i
                            class="information">Stranger under my skin</i><em class="date">2011-02-22</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/2-2.png" alt=""> <i
                            class="information">Shall We Talk</i><em class="date">2020-07-15</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/2-3.png" alt=""> <i
                            class="information">U87</i><em class="date">2005-06-07 </em></span>
                    <span><img src="../images/yue-album/yue album/2-4.png" alt=""></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/3-1.png" alt=""> <i
                            class="information">C'mon in~</i><em class="date">2017-10-09</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/3-2.png" alt=""> <i
                            class="information">Time Flies</i><em class="date">2010-03-12</em></span>
                    <div class="line3word">
                        <span class="front"><img src="../images/yue-album/yue album/3-3.png" alt=""></span>
                        <span class="back"><img src="../images/all-album/geci effect/3-3d.png" alt=""></span>
                    </div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/3-4.png" alt=""> <i
                            class="information">是但求其爱</i><em class="date">2020-11-20</em></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/4-1.png" alt=""> <i
                            class="information">Solidays</i><em class="date">2008-08-26</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/4-2.png" alt=""> <i
                            class="information">Eason Moving On Stage 1</i><em class="date">2008-04-30</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/4-3.png" alt=""> <i
                            class="information">…3mm</i><em class="date">2012-08-10</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/4-4.png" alt=""> <i
                            class="information">ReImagine Leslie Cheung</i><em class="date">2012-04-25</em></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/5-1.png" alt=""> <i
                            class="information">Eason‘s Life 2013演唱会</i><em class="date">2013-12-18</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/5-2.png" alt=""> <i
                            class="information">The Key</i><em class="date">2013-07-22</em></span>
                    <span><img src="../images/yue-album/yue album/5-3.png" alt=""></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/5-4.png" alt=""> <i
                            class="information">The Best Moment</i><em class="date">2008-09-03</em></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/6-1.png" alt=""> <i
                            class="information">准备中</i><em class="date">2015-07-13</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/6-2.png" alt=""> <i
                            class="information">Great 5000 Secs</i><em class="date">2005-02-01</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/6-3.png" alt=""> <i
                            class="information">The Easy Ride</i><em class="date">2001 -11-08</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/6-4.png" alt=""> <i
                            class="information">Mixed Up</i><em class="date">2001-07-01</em></span>
                </div>
                <div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/7-1.png" alt=""> <i
                            class="information">Shall We Dance? Shall We Talk!</i><em
                            class="date">2001-03-29</em></span>
                    <span class="albumspan"><img src="../images/yue-album/yue album/7-2.png" alt=""> <i
                            class="information">准备中 </i><em class="date">2015-07-13</em></span>
                    <div class="line7word">
                        <span class="front"><img src="../images/yue-album/yue album/7-3.png" alt=""></span>
                        <span class="back"><img src="../images/all-album/geci effect/7-3d.png" alt=""></span>
                    </div>
                    <span class="albumspan"><img src="../images/yue-album/yue album/7-4.png" alt=""> <i
                            class="information">与我常在</i><em class="date">1998-02-01</em></span>
                </div>
            </div>
        </div>
    </div>
    <script src="../JS/footer.js"></script>
    <script>
        let albumspan = document.querySelectorAll('.albumspan');
        for (let i = 0; i < albumspan.length; i++) {
            albumspan[i].addEventListener('click', function () {
                let musicall = document.querySelectorAll('audio');
                for (let x = 0; x < musicall.length; x++) {
                    musicall[x].pause();
                    console.log(musicall[x]);
                    console.log(musicall[x].paused);
                }
                let music = albumspan[i].querySelector('audio');
                music.play();
                console.log(musicall[i].paused);

            })
            albumspan[i].addEventListener('mouseover', function () {
                let albumi = albumspan[i].querySelector('i');
                let albumem = albumspan[i].querySelector('em');
                albumi.style.display = 'block';
                albumem.style.display = 'block';
                albumi.style.animation = "appear 500ms";
                albumem.style.animation = "appear 500ms";
            })
            albumspan[i].addEventListener('mouseleave', function () {
                let albumi = albumspan[i].querySelector('i');
                let albumem = albumspan[i].querySelector('em');
                albumi.style.display = 'none';
                albumem.style.display = 'none';
                albumi.style.animation = "disappear 500ms";
                albumem.style.animation = "disappear 500ms";
            })
        }
    </script>
    <script src="../mouse.js"></script>
</body>

</html>